<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.6&key=2a2eda107cafe1cd0679fb71dcf6a50a"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/amazeui.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <title>下单</title>
<style>
</style>
</head>
<body>
<!--头部-->

<header data-am-widget="header" class="am-header am-header-default" style="background-color: white; ">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.go(-1);">
            <i class="am-icon-chevron-left" style="font-size: 20px;color: #757575;"></i>
        </a>
        <span style="font-size: 18px;color: #757575;">顺一下</span>
    </div>
</header>


<div class="am-nav" id="pickerBox" style="padding: 0 4% 2% 4%;background-color: white;margin-bottom: 3%;">
    <div class="am-u-sm-12" style="margin-top: 1%;border-bottom: 1px solid #757575;">
        <span>起始点：</span>
        <input type="text" id="pos1" class="input-pos"
               style="border: 0;height: 30px;width:70%;box-shadow: none;outline:none;font-size: 16px;color: black;">
    </div>
    <br style="height: 1px;" />
    <div class="am-u-sm-12" style="margin-top: 5%;border-bottom: 1px solid #757575;">
        <span>目的地：</span>
        <input type="text" id="pos2" class="input-pos" placeholder=""
               style="border:0; height: 30px;width:70%;box-shadow: none;outline:none;font-size: 16px;color: black;">
    </div>
</div>

<!--地图-->
<div id='container' style="height: 290px;z-index: 1;"></div>
<div class="am-nav" style="margin: 1% auto;">
    <select data-am-selected="{dropUp: 1}" id="categoryOption" hidden>
    </select>
</div>
<div class="am-navbar am-u-sm-12" >
    <button class="am-btn am-btn-warning"  id="createOrderBtn" style="width: 100%;" type="button">立即找人</button>
</div>
</body>
<script type="text/javascript">
    /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

    //解析定位结果
    function onComplete(data) {
        const address = data.formattedAddress;
        let addressTop = data.addressComponent.province + data.addressComponent.city + data.addressComponent.district +data.addressComponent.township + data.addressComponent.street + data.addressComponent.streetNumber;
        let pos1 = address.replace(addressTop,"");
        $("#pos1").val(pos1);
    }

    //解析定位错误信息
    function onError(data) {
        $("#pos1").val('定位失败');
    }

    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {

        var poiPicker = new PoiPicker({
            //city:'北京',
            input: 'pos2'
        });

        //初始化poiPicker
        poiPickerReady(poiPicker);
    });

    function poiPickerReady(poiPicker) {

        window.poiPicker = poiPicker;

        var marker = new AMap.Marker();

        var infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -20)
        });

        //选取了某个POI
        poiPicker.on('poiPicked', function (poiResult) {

            var source = poiResult.source,
                poi = poiResult.item,
                info = {
                    source: source,
                    id: poi.id,
                    name: poi.name,
                    location: poi.location.toString(),
                    address: poi.address
                };
            $("#pos2").val(info.name);

            marker.setMap(map);
            infoWindow.setMap(map);

            marker.setPosition(poi.location);
            infoWindow.setPosition(poi.location);

            //map.setCenter(marker.getPosition());
        });

        poiPicker.onCityReady(function () {
            poiPicker.suggest('');
        });
    }

    $(function () {
        getCategoryList();

        $("#createOrderBtn").click(function () {
            let pos1 = $("#pos1").val();
            let pos2 = $("#pos2").val();

            let category = $('#categoryOption option:selected').val();

            let distance = "12.3"
            let price = distance;
            if (category != "" && pos2 != "" && pos1 != ""){
                addOrder(category, pos1, pos2, distance,price);
            }
        });
    });

</script>


</html>